{extend name='public/base'}
{block name='content'}
    <!-- Content Header (Page header) -->
    <section class="content-header">
      <h1>
        仪表盘
        <small>控制面板</small>
      </h1>
      <ol class="breadcrumb">
        <li><a href="#"><i class="fa fa-dashboard"></i> Home</a></li>
        <li class="active">Dashboard</li>
      </ol>
    </section>

    <!-- Main content -->
     <section class="content">
      <!-- Info boxes -->
      <div class="row">
        <div class="col-md-3 col-sm-6 col-xs-12">
          <div class="info-box">
            <span class="info-box-icon bg-aqua"><img src="/static/img/clinic.png" alt="" class='fa' style="width:50px"></span>

            <div class="info-box-content">
              <span class="info-box-text">诊所</span>
              <span class="info-box-number">{$arr['clinic']}</span>
            </div>
            <!-- /.info-box-content -->
          </div>
          <!-- /.info-box -->
        </div>
        <!-- /.col -->
        <div class="col-md-3 col-sm-6 col-xs-12">
          <div class="info-box">
            <span class="info-box-icon bg-red"><img src="/static/img/cf.png" alt="" class='fa' style="width:50px"></span>

            <div class="info-box-content">
              <span class="info-box-text">处方</span>
              <span class="info-box-number">{$arr['recipel']}</span>
            </div>
            <!-- /.info-box-content -->
          </div>
          <!-- /.info-box -->
        </div>
        <!-- /.col -->

        <!-- fix for small devices only -->
        <div class="clearfix visible-sm-block"></div>

        <div class="col-md-3 col-sm-6 col-xs-12">
          <div class="info-box">
            <span class="info-box-icon bg-green"><img src="/static/img/user.png" alt="" class='fa' style="width:50px"></span>

            <div class="info-box-content">
              <span class="info-box-text">用户</span>
              <span class="info-box-number">{$arr['user']}</span>
            </div>
            <!-- /.info-box-content -->
          </div>
          <!-- /.info-box -->
        </div>
        <!-- /.col -->
        <div class="col-md-3 col-sm-6 col-xs-12">
          <div class="info-box">
            <span class="info-box-icon bg-yellow"><img src="/static/img/drug.png" alt="" class='fa' style="width:50px"></span>

            <div class="info-box-content">
              <span class="info-box-text">药物</span>
              <span class="info-box-number">{$arr['drug']}</span>
            </div>
            <!-- /.info-box-content -->
          </div>
          <!-- /.info-box -->
        </div>
        <!-- /.col -->
      </div>
      <!-- /.row -->
      <i style="clear: both;"></i>
      <div class="row" id="main" style="height:600px;background: #ffffff"></div>
      <i style="clear: both;"></i>
      
      <!-- /.row -->
    </section>
    <!-- /.content -->
{/block}
{block name='js'}
<!-- ChartJS -->
<script src="__AdminLTE__/bower_components/chart.js/Chart.js"></script>
<!-- AdminLTE dashboard demo (This is only for demo purposes) -->
  <!-- 日期选择器 -->
  <script>
    layui.use('laydate', function () {
      var laydate = layui.laydate;
      //日期时间范围
      laydate.render({
        elem: '#test10'
        , type: 'datetime'
        , range: true
      });
    });
  </script>
  
  <script type="text/javascript">
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'), 'wonderland');

    // 指定图表的配置项和数据
    var option = {
      title: {
        text: '用户统计'
      },
      tooltip: {},
      legend: {
        data: ['人']
      },
      xAxis: {
        data: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"]
      },
      yAxis: {},
      series: [{
        name: '人数',
        type: 'bar',
        data: [{$jf}]
      }]

    };

    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
  </script>
<!-- AdminLTE for demo purposes -->
<!-- <script src="__AdminLTE__/dist/js/demo.js"></script> -->
<script src="__AdminLTE__/dist/js/pages/dashboard2.js"></script>
<!-- jvectormap  -->
<script src="__AdminLTE__/plugins/jvectormap/jquery-jvectormap-1.2.2.min.js"></script>
<script src="__AdminLTE__/plugins/jvectormap/jquery-jvectormap-world-mill-en.js"></script>
<!-- SlimScroll -->
<script src="__AdminLTE__/bower_components/jquery-slimscroll/jquery.slimscroll.min.js"></script>
<!-- Sparkline -->
<script src="__AdminLTE__/bower_components/jquery-sparkline/dist/jquery.sparkline.min.js"></script>
{/block}